<template>
  <div style="margin: 20px">
    <el-form ref="userBasicDetailRuleFormRef" :model="formValue" v-loading="loading" :rules="userBasicDetailFormRules" label-width="auto" class="form-inline">
      <div style="font-size: 16px; font-weight: bold;">
        基本信息：
      </div>
      <el-row :gutter="20">
        <el-col :span="6">
          <el-form-item label="部门" prop="deptId">
            <el-select :disabled = "isUnEditable" filterable
                       v-model="formValue.deptId"
            >
              <el-option
                  v-for="item in deptData"
                  :key="item.id"
                  :label="item.deptName"
                  :value="item.id"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="姓名" prop="userName">
            <el-input :disabled = "isUnEditable" v-model="formValue.userName" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="身份证号码" prop="userIdNumber">
            <el-input :disabled = "isUnEditable" v-model="formValue.userIdNumber" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="工号" prop="jobNumber">
            <el-input  :disabled = "isUnEditable"v-model="formValue.jobNumber" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="6">
          <el-form-item label="性别" prop="userSex">
            <el-select :disabled = "isUnEditable" v-model="formValue.userSex">
              <el-option label="男" value="男" />
              <el-option label="女" value="女" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="出生年月" prop="userBirthday">
            <el-date-picker :disabled = "isUnEditable"
                            v-model="formValue.userBirthday"
                            type="date"
                            value-format="YYYY-MM-DD"
                            style="width: 200px"
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="民族" prop="userNation">
            <el-input :disabled = "isUnEditable" v-model="formValue.userNation" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="籍贯" prop="userNativePlace">
            <el-input :disabled = "isUnEditable" v-model="formValue.userNativePlace" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="6">
          <el-form-item label="政治面貌" prop="userPoliticalStatus">
            <el-input :disabled = "isUnEditable" v-model="formValue.userPoliticalStatus" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="工作时间" prop="workStartDate">
            <el-date-picker :disabled = "isUnEditable"
                            v-model="formValue.workStartDate"
                            type="date"
                            value-format="YYYY-MM-DD"
                            style="width: 200px"
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="工作年限" prop="workYearCount">
            <el-input-number :disabled = "isUnEditable" v-model="formValue.workYearCount" :min="0" :max="100" style="width: 200px" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="来校时间" prop="userArrivalDate">
            <el-date-picker :disabled = "isUnEditable"
                            v-model="formValue.userArrivalDate"
                            type="date"
                            value-format="YYYY-MM-DD"
                            style="width: 200px"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="6">
          <el-form-item label="身份类别" prop="userCategory">
            <el-select :disabled = "isUnEditable" v-model="formValue.userCategory">
              <el-option label="全民" value="全民" />
              <el-option label="非编人代" value="非编人代" />
              <el-option label="编外聘任" value="编外聘任" />
              <el-option label="人事代理" value="人事代理" />
              <el-option label="混岗" value="混岗" />
              <el-option label="征地" value="征地" />
              <el-option label="征地" value="征地" />
              <el-option label="合同聘用" value="合同聘用" />
              <el-option label="无" value="无" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="是否入库" prop="userStorageStatus">
            <el-input :disabled = "isUnEditable" v-model="formValue.userStorageStatus" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="最高学历" prop="highestEducation">
            <el-select :disabled = "isUnEditable" v-model="formValue.highestEducation">
              <el-option label="博研" value="博研" />
              <el-option label="硕研" value="硕研" />
              <el-option label="本科" value="本科" />
              <el-option label="中专" value="中专" />
              <el-option label="大专" value="大专" />
              <el-option label="大学" value="大学" />
              <el-option label="技校" value="技校" />
              <el-option label="高中" value="高中" />
              <el-option label="高中以下" value="高中以下" />
              <el-option label="研究生班" value="研究生班" />
              <el-option label="无" value="无" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="最高学位" prop="highestDegree">
            <el-select :disabled = "isUnEditable" v-model="formValue.highestDegree">
              <el-option label="博士后" value="博士后" />
              <el-option label="博士" value="博士" />
              <el-option label="硕士" value="硕士" />
              <el-option label="学士" value="学士" />
              <el-option label="无" value="无" />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="6">
          <el-form-item label="最高学历获取院校" prop="highestSchool">
            <el-input :disabled = "isUnEditable" v-model="formValue.highestSchool" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="最高学位获取学院" prop="highestCollege">
            <el-input  :disabled = "isUnEditable"v-model="formValue.highestCollege" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="毕业专业" prop="highestMajor">
            <el-input :disabled = "isUnEditable" v-model="formValue.highestMajor" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="毕业时间" prop="graduationTime">
            <el-date-picker :disabled = "isUnEditable"
                            v-model="formValue.graduationTime"
                            type="date"
                            value-format="YYYY-MM-DD"
                            style="width: 200px"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="6">
          <el-form-item label="移动电话" prop="userPhone">
            <el-input :disabled = "isUnEditable" v-model="formValue.userPhone" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="档案状态" prop="userFileStatus">
            <el-select :disabled = "isUnEditable" v-model="formValue.userFileStatus">
              <el-option label="有" value="有" />
              <el-option label="无" value="无" />
              <el-option label="有（不全）" value="有（不全）" />
              <el-option label="是" value="是" />
              <el-option label="省管" value="省管" />
              <el-option label="外籍无档案" value="外籍无档案" />
              <el-option label="代管" value="代管" />
              <el-option label="待整理" value="待整理" />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <div style="font-size: 16px; font-weight: bold;">
        来校信息：
      </div>
      <el-row :gutter="20">
        <el-col :span="6">
          <el-form-item label="内设机构" prop="subDept">
            <el-input :disabled = "isUnEditable" v-model="formValue.userAttendanceInfo.subDept"/>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="人员分类" prop="userClass">
            <el-input :disabled = "isUnEditable" v-model="formValue.userAttendanceInfo.userClass"/>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="来校状态" prop="attendanceStatus">
            <el-select :disabled = "isUnEditable" v-model="formValue.userAttendanceInfo.attendanceStatus">
              <el-option label="在职-在岗" value="在职-在岗" />
              <el-option label="减员-出站" value="减员-出站" />
              <el-option label="学术副校长" value="学术副校长" />
              <el-option label="减员-退休" value="减员-退休" />
              <el-option label="减员-辞职" value="减员-辞职" />
              <el-option label="减员-解聘" value="减员-解聘" />
              <el-option label="在职-在岗2" value="在职-在岗2" />
              <el-option label="减员-离职" value="减员-离职" />
              <el-option label="减员-调离" value="减员-调离" />
              <el-option label="在职-长期病假" value="在职-长期病假" />
              <el-option label="在职-停薪" value="在职-停薪" />
              <el-option label="减员-去世" value="减员-去世" />
              <el-option label="减员-脱产读博" value="减员-脱产读博" />
              <el-option label="减员-统招读博" value="减员-统招读博" />
              <el-option label="其他" value="其他" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="来校状态说明" prop="attendanceStatusRemark">
            <el-input :disabled = "isUnEditable" v-model="formValue.userAttendanceInfo.attendanceStatusRemark"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="6">
          <el-form-item label="行政职务">
            <el-input :disabled = "isUnEditable" v-model="formValue.userAttendanceInfo.userPost"/>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="任职时间">
            <el-date-picker :disabled = "isUnEditable"
                            v-model="formValue.userAttendanceInfo.postTime"
                            type="date"
                            value-format="YYYY-MM-DD"
                            style="width: 200px"
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="入校职称情况">
            <el-input :disabled = "isUnEditable" v-model="formValue.userAttendanceInfo.professionalInfo"/>
          </el-form-item>
        </el-col>
      </el-row>
      <div style="font-size: 16px; font-weight: bold;">
        教育经历：
        <el-button type="primary" v-if="!isUnEditable" @click="educationDialogFormVisible = true">新增</el-button>
      </div>

      <el-table :data="formValue.userEducationVOList">
        <el-table-column property="graduationSchool" label="毕业院校"/>
        <el-table-column property="startTime" label="入学时间"/>
        <el-table-column property="endTime" label="毕业时间" />
        <el-table-column property="collegeMajor" label="学院专业" />
        <el-table-column property="remark" label="备注" />
        <el-table-column v-if="!isUnEditable" label="操作">
          <template #default="scope">
            <el-button
                size="small"
                type="danger"
                @click="handleEducationDelete(scope.$index, scope.row)"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <div style="font-size: 16px; font-weight: bold; margin-top: 20px">
        家庭成员：
        <el-button type="primary" v-if="!isUnEditable" @click="familyMemberDialogFormVisible = true">新增</el-button>
      </div>
      <el-table :data="formValue.userFamilyMemberVOList">
        <el-table-column property="memberName" label="成员名称"/>
        <el-table-column property="memberDept" label="成员单位"/>
        <el-table-column property="memberRelation" label="成员关系" />
        <el-table-column v-if="!isUnEditable" label="操作">
          <template #default="scope">
            <el-button
                size="small"
                type="danger"
                @click="handleFamilyMemberDelete(scope.$index, scope.row)"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-form>
    <el-dialog v-model="educationDialogFormVisible" title="教育经历" width="600">
      <el-form :model="educationFormVale" label-width="auto">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="毕业院校">
              <el-input v-model="educationFormVale.graduationSchool"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="学院专业">
              <el-input v-model="educationFormVale.collegeMajor"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="入学时间">
              <el-date-picker format="YYYY/MM/DD" value-format="YYYY-MM-DD" :disabled = "isUnEditable"
                              v-model="educationFormVale.startTime"
                              type="date"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="毕业时间">
              <el-date-picker format="YYYY/MM/DD" value-format="YYYY-MM-DD" :disabled = "isUnEditable"
                              v-model="educationFormVale.endTime"
                              type="date"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="备注">
              <el-input v-model="educationFormVale.remark"/>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="educationDialogFormVisible = false">关闭</el-button>
          <el-button type="primary" @click="educationDialogFormConfirm">
            确认
          </el-button>
        </div>
      </template>
    </el-dialog>
    <el-dialog v-model="familyMemberDialogFormVisible" title="家庭成员" width="400">
      <el-form :model="familyMemberVale" label-width="auto">
        <el-form-item label="成员名称">
          <el-input v-model="familyMemberVale.memberName"/>
        </el-form-item>
        <el-form-item label="成员单位">
          <el-input v-model="familyMemberVale.memberDept"/>
        </el-form-item>
        <el-form-item label="成员关系">
          <el-input v-model="familyMemberVale.memberRelation"/>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="familyMemberDialogFormVisible = false">关闭</el-button>
          <el-button type="primary" @click="familyMemberDialogFormConfirm">确认</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>


<script setup>

import {onMounted, ref} from "vue";
import UserBasic from "@/api/UserBasic.js";
import Dept from "@/api/Dept.js";
import {ElMessage} from "element-plus";

const educationDialogFormVisible = ref(false)
const familyMemberDialogFormVisible = ref(false)

const loading = ref(false);

const deptData = ref([]);

const userBasicDetailRuleFormRef = ref({})
const validateUserIdNumber = (rule, value, callback) => {
  const pattern = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
  if (!pattern.test(value)) {
    callback(new Error('身份证号格式不正确'));
  } else {
    callback();
  }
};
const userBasicDetailFormRules = ref({
  deptId: [
    { required: true, message: '请选择部门', trigger: 'blur' }
  ],
  userName: [
    { required: true, message: '请输入姓名', trigger: 'blur' },
    { min: 1, max: 10, message: '长度在1到10', trigger: 'blur' },
  ],
  userIdNumber: [
    { required: true, message: '请输入身份证号', trigger: 'blur' },
    { validator: validateUserIdNumber, trigger: 'blur' },
  ],
  jobNumber: [
    { required: true, message: '请输入工号', trigger: 'blur' },
  ],
  userSex: [
    { required: true, message: '请选择性别', trigger: 'blur' },
  ],
  userBirthday: [
    { required: true, message: '请选择出生年月', trigger: 'blur' },
  ],
  userNation: [
    { required: true, message: '请输入民族', trigger: 'blur' },
  ],
  userNativePlace: [
    { required: true, message: '请输入籍贯', trigger: 'blur' },
  ],
  userPoliticalStatus: [
    { required: true, message: '请输入政治面貌', trigger: 'blur' },
  ],
  workStartDate: [
    { required: true, message: '请输入工作时间', trigger: 'blur' },
  ],
  workYearCount: [
    { required: true, message: '请输入工作年限', trigger: 'blur' },
  ],
  userArrivalDate: [
    { required: true, message: '请输入来校时间', trigger: 'blur' },
  ],
  userCategory: [
    { required: true, message: '请输入身份类别', trigger: 'blur' },
  ],
  userStorageStatus: [
    { required: true, message: '请输入是否入库', trigger: 'blur' },
  ],
  highestEducation: [
    { required: true, message: '请输入最高学历', trigger: 'blur' },
  ],
  highestDegree: [
    { required: true, message: '请输入最高学位', trigger: 'blur' },
  ],
  highestSchool: [
    { required: true, message: '请输入最高学历获取院校', trigger: 'blur' },
  ],
  highestCollege: [
    { required: true, message: '请输入最高学位获取学院', trigger: 'blur' },
  ],
  highestMajor: [
    { required: true, message: '请输入毕业专业', trigger: 'blur' },
  ],
  graduationTime: [
    { required: true, message: '请输入毕业时间', trigger: 'blur' },
  ],
  userPhone: [
    { required: true, message: '请输入移动电话', trigger: 'blur' },
  ],
  userFileStatus: [
    { required: true, message: '请输入档案状态', trigger: 'blur' },
  ],
})


const props = defineProps({
  isUnEditable: {
    type: Boolean,
    default: true
  },
  type: {
    type: String,
    default: 'detail',
    validator: (val) => ['detail', 'update', 'save'].includes(val)
  },
  formValue: {
    type: Object,
    required: true
  }
});

onMounted(() => {
  listAllDept()
});

const listAllDept = () => {
  Dept.listAllDept()
      .then(res => {
        deptData.value = res.data
      })
};

const educationFormVale = ref({});
const educationDialogFormConfirm = () => {
  const item =  ref({
    graduationSchool:educationFormVale.value.graduationSchool,
    collegeMajor:educationFormVale.value.collegeMajor,
    startTime:educationFormVale.value.startTime,
    endTime:educationFormVale.value.endTime,
    remark:educationFormVale.value.remark
  });
  props.formValue.userEducationVOList.push(item.value)
  educationDialogFormVisible.value = false
}

const familyMemberVale = ref({});
const familyMemberDialogFormConfirm = () => {
  const item =  ref({
    memberName:familyMemberVale.value.memberName,
    memberDept:familyMemberVale.value.memberDept,
    memberRelation:familyMemberVale.value.memberRelation
  });
  props.formValue.userFamilyMemberVOList.push(item.value)
  familyMemberDialogFormVisible.value = false
}

const handleEducationDelete = (index, row) => {
  props.formValue.userEducationVOList.splice(index, 1)
}

const handleFamilyMemberDelete = (index, row) => {
  props.formValue.userFamilyMemberVOList.splice(index, 1)
}

const validateForm = (callback) => {
  if (!userBasicDetailRuleFormRef.value) {
    callback(new Error('信息不完整'))
  }
  userBasicDetailRuleFormRef.value.validate((valid, fields) => {
    if (valid) {
      callback()
    } else {
      callback(new Error('信息不完整'))
    }
  })
}

defineExpose({
  validateForm
});

</script>
<style scoped>
.form-inline {
  margin: 20px;
}
.form-inline .el-input {
  --el-input-width: 200px;
}

.form-inline .el-select {
  --el-select-width: 200px;
}

.fixed-button-container {
  position: fixed;
  bottom: 50px; /* 距离底部的距离 */
  left: 50%; /* 水平居中定位 */
  transform: translateX(-50%); /* 偏移量，实现水平居中 */
  display: flex;
  justify-content: center; /* 水平居中按钮 */
  align-items: center; /* 垂直居中（如果需要的话） */
  z-index: 10;
}

.fixed-button {
  margin: 0 10px; /* 按钮之间的间距 */
  padding: 10px 20px; /* 按钮的内边距 */
}
</style>